<template>
  <el-card :body-style="bodyStyle"
           :title="card.name"
           @mouseenter="handleMouseEnter"
           @mouseleave="handleMouseLeave"
           :class="{ hovered: isHovered }"
  >
    <img :src="card.img"
         class="card-img"
         :style="imageStyle"
         @mouseenter="handleMouseEnter"
         @mouseleave="handleMouseLeave">
    <div v-if="!isHovered" style="padding: 8px;">
      <p class="card-name line-limit-length">{{card.name}}</p>
      <div class="bottom clearfix">
        <p class="card-type line-limit-length">{{ card.type }}</p>
      </div>
    </div>
    <div v-else style="margin: 20px -15px;">
      <p class="card-name line-limit-length">{{card.name}}</p>
      <div class="bottom clearfix">
        <p class="card-type line-limit-length">{{ card.type }}</p>
      </div>
    </div>
  </el-card>
</template>

<script>
export default {
  name: 'Card',
  props: ['card'],
  data() {
    return {
      isHovered: false
    };
  },
  computed: {
    bodyStyle() {
      return {
        padding: this.isHovered ? '8px' : '0px',
        height: this.isHovered ? '312px' : '260px',
        width: this.isHovered ? '162px' : '135px',
        cursor: 'pointer',
      };
    },
    imageStyle() {
      return {
        transform: this.isHovered ? 'scale(1.2)' : 'scale(1)',
        transition: 'transform 0.3s ease-in-out',
      };
    }
  },
  methods: {
    handleMouseEnter() {
      this.isHovered = true;
    },
    handleMouseLeave() {
      this.isHovered = false;
    }
  }
}
</script>

<style scoped>
.el-card {
  height: 260px;
  width: 135px;
  cursor: pointer;
  margin-bottom: 12px;
}

.card-img {
  height: 200px;
  width: 100%; /* 确保图片宽度占满卡片 */
  object-fit: cover; /* 图片填充整个容器 */
  transition: transform 0.3s ease-in-out;
}

.card-name {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.87);
  text-align: left;
  margin-bottom: 5px;
}

.card-type {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.34);
  text-align: left;
}

.line-limit-length {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0px;
}

.hovered {
  padding: 8px; /* 当鼠标移入时应用此样式 */
  height: 312px;
  width: 162px;
}
</style>
